<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">


    <p:dataScroller value="#{objetivoEstrategicoController.itemsResponsable}" 
                    rendered="#{objetivoEstrategicoController.selected!=null}"
                    var="item" chunkSize="10" id="dataScrollerResponsables">
        <f:facet name="header">
            <h:panelGrid columns="4" style="width:100%" rendered="#{objetivoEstrategicoController.selected!=null}" >

                <p:outputLabel value="RESPONSABLES" />
                <span class="ui-separator">
                    <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                </span>

                <p:outputLabel value="Agregar" for="selectOneMenuResponsable"  />

                <p:selectOneMenu id="selectOneMenuResponsable" value="#{objetivoEstrategicoController.usuario}" 
                                 >
                    <f:selectItems value="#{objetivoEstrategicoController.filterListResponsable}"
                                   var="usuarioItem"
                                   itemValue="#{usuarioItem}"
                                   itemLabel="#{usuarioItem.nombres} #{usuarioItem.apellidos}"/>
                    <f:converter binding="#{usuarioConverter}"/>
                    <p:ajax event="change"  
                            listener="#{objetivoEstrategicoController.addResponsable()}"
                            update="dataScrollerResponsables, :growl"/>
                </p:selectOneMenu>

            </h:panelGrid>
        </f:facet>
        <h:panelGrid columns="3" style="width:100%" columnClasses="logo,detail,update">
            <p:graphicImage value="http://smartergp-app.com/Images/menu/2.png" width="50" height="50" /> 

            <p:outputPanel>
                <h:panelGrid columns="2" cellpadding="10">
                    <h:outputText value="Nombres:" style="font-weight: bold"/>
                    <h:outputText value="#{item.nombres} #{item.apellidos}" />

                    <h:outputText value="Email:" style="font-weight: bold"/>
                    <h:outputText value="#{item.email}" />

                    <h:outputText value="Cargo:" style="font-weight: bold"/>
                    <h:outputText value="#{item.cargo}" style="color: #26BC85"/>
                </h:panelGrid>
            </p:outputPanel>
            <p:commandButton icon="ui-icon-closethick" title="Eliminar"
                             actionListener="#{objetivoEstrategicoController.deleteItemsResponsable(item)}"
                             update=":crudOE:tabView1:dataScrollerResponsables,:growl"
                             />
            <span class="ui-separator">
                <span class="ui-icon  ui-icon-grip-dotted-horizontal" />
            </span>
        </h:panelGrid>
    </p:dataScroller>
</html>
